<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <!-- 当前文件定制 -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css">
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" name="超级管理员" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>用户管理<small>用户详情</small></h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">用户</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-3">
                        <!-- Profile Image -->
                        <div class="box box-primary">
                            <div class="box-body box-profile">
                                <if condition="$user['pic_name'] neq 0">
                                    <img src="__PUBLIC__/Uploads/user/{$user.pic_path}200x200/{$user.pic_name}" class="profile-user-img img-responsive img-circle" alt="User Image">
                                    <else/>
                                    <img src="__PUBLIC__/pictures/profile.jpg" class="profile-user-img img-responsive img-circle" alt="User Image">
                                </if>
                                <h3 class="profile-username text-center">{$user.name}</h3>
                                <p class="text-muted text-center">{$user.level}</p>
                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item">
                                        <b>经验值</b> <a class="pull-right">1,322</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>帐号余额</b> <a class="pull-right">543</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>消费纪录</b> <a class="pull-right">13,287</a>
                                    </li>
                                </ul>
                                <strong><i class="fa fa-paw margin-r-5"></i> 账号名</strong>
                                <p class="text-muted">
                                    {$user.account}
                                </p>
                                <hr>
                                <strong><i class="fa fa-phone margin-r-5"></i> 电话</strong>
                                <p class="text-muted">
                                    {$user.phone}
                                </p>
                                <hr>
                                <strong><i class="fa fa-book margin-r-5"></i> 电子邮箱</strong>
                                <p class="text-muted">
                                    {$user.email}
                                </p>
                                <hr>
                                <strong><i class="fa fa-map-marker margin-r-5"></i>等级</strong>
                                <p class="text-muted">
                                    <form action="__APP__/Home/superuser/user/level/id/{$user.user_id}" method="post">
                                        <input type="number" name="level" value='{$user.level}'/>
                                        <button class="btn btn-primary">修改等级</button>
                                    </form></p>
                                <hr>
                                <strong><i class="fa fa-pencil margin-r-5"></i> 权限管理</strong>
                                <p>
                                    {$user.type}

                                    <span class="label label-danger"><a href="__APP__/Home/superuser/user/modifytype/id/{$user.user_id}/type/super">改为管理员</a></span>
                                    <span class="label label-success"><a href="__APP__/Home/superuser/user/modifytype/id/{$user.user_id}/type/normal">改成普通的</a></span>
                                </p>
                                <hr>
                                <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-9">
                        <if condition="isset($list) neq 0">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="box">
                                        <div class="box-header">
                                            <h3 class="box-title">用户订单历史</h3>
                                            <div class="box-tools">
                                                <div class="input-group input-group-sm" style="width: 150px;">
                                                    <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
                                                    <div class="input-group-btn">
                                                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.box-header -->
                                        <div class="box-body table-responsive no-padding">
                                            <table class="table table-hover">
                                                <tr>
                                                    <th>序号</th>
                                                    <th>店名</th>
                                                    <th>User</th>
                                                    <th>Date</th>
                                                    <th>Status</th>
                                                    <th></th>
                                                </tr>
                                                <volist name="list" id="order">
                                                    <tr>
                                                        <td>{$i}</td>
                                                        <td>{$order.name}</td>
                                                        <td>User</td>
                                                        <td>Date</td>
                                                        <td>Status</td>
                                                        <td><a href="__APP__/Home/SuperUser/SuperShop/listShop/id/{$order.order_id}" target="_blank">详情</a></td>
                                                    </tr>
                                                </volist>
                                            </table>
                                        </div>
                                        <!-- /.box-body -->
                                        <div class="box-footer clearfix">
                                            <ul class="pagination pagination-sm no-margin pull-right">
                                                <li><a href="#">&laquo;</a></li>
                                                <li><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">&raquo;</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- /.box -->
                                </div>
                            </div>
                            <else />
                        </if>
                        <!-- /.col -->
                    </div>
            </section>
            </div>
            <!-- /.col -->
            <include file="layout/copyright" />
        </div>
        <!-- /.content-wrapper -->
        <!-- ./wrapper -->
        <!-- REQUIRED JS SCRIPTS -->
        <!-- 外头文件 -->
        <include file="layout/footer" />
        <!-- 当前定制 -->
        <script src="__PUBLIC__/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="__PUBLIC__/plugins/datatables/dataTables.bootstrap.min.js"></script>
        <!-- DOM 操作 -->
        <script>
        $(document).ready(function() {
            function addSelectInfo() {
                if ($(".dataTables_info").find('.selectInfo').size() > 0);
                else {
                    $(".dataTables_info").append("<span class='selectInfo'></span>");
                }
                $('.selectInfo').html("&nbsp;&nbsp;共" + $('.checklist:checked').size() + "项选中");
            }

            function checkSelectAll() {
                if ($('.checklist').size() == $('.checklist:checked').size()) {
                    $("#selectAll").prop('checked', true);
                } else {
                    $('#selectAll').prop('checked', false);
                }
                addSelectInfo();
            }

            var table = $('#userlist').DataTable({
                "dom": 'lrtip',
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": false,
                "info": true,
                "autoWidth": true,
                "bFilter": true,
                "columnDefs": [{
                    orderable: false,
                    targets: 0
                }, {
                    orderable: false,
                    targets: 1
                }, {
                    orderable: false,
                    targets: 2
                }], //第一列与第二列禁止排序
                "order": [
                    [0, null]
                ],
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "抱歉， 没有找到",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有数据",
                    "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                    "sZeroRecords": "没有检索到数据",
                    "sSearch": "搜索:",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "前一页",
                        "sNext": "后一页",
                        "sLast": "尾页"
                    }
                },
                initComplete: function() {
                    var api = this.api();
                    api.columns().indexes().flatten().each(function(i) {
                        if (i != 0 && i != 1) {
                            var column = api.column(i);
                            // var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
                            var select = $('<select><option value="">All</option></select>')
                                .appendTo($(column.header()))
                                .on('change', function(evt) {
                                    evt.stopPropagation();
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                                    console.log(val);
                                    column.search(val, true, false)
                                        .draw();
                                });
                            column.data().unique().sort().each(function(d, j) {
                                function delHtmlTag(str) {
                                    return $.trim(str.replace(/<[^>]+>/g, "")); //去掉html标签
                                }
                                d = delHtmlTag(d)
                                    // if(d!='')
                                select.append('<option value="' + d + '">' + d + '</option>')
                                    // $span.append(select)
                            });
                        }
                    });
                }
            });

            $('#userlist tbody').on('click', 'tr', function(e) {
                stopBubble(e);
                var checkbox = $(this).find("input[type=checkbox]").eq(0);
                if (checkbox != undefined) {
                    checkbox.prop('checked', !checkbox.prop('checked'));
                    if (checkbox.prop('checked')) $(this).addClass('selected');
                    else $(this).removeClass('selected');
                }
                checkSelectAll();
            });

            $('.checklist').on('click', function(e) {
                stopBubble(e);
                checkSelectAll();
                var tr = $(this).parent().parent();
                if ($(this).prop('checked')) tr.addClass('selected');
                else tr.removeClass('selected');
            });

            $("#selectAll").on('click', function(e) {
                stopBubble(e);
                $('.checklist').prop('checked', $(this).prop('checked'));
                var tr = $('.checklist').parent().parent();
                if ($(this).prop('checked')) tr.addClass('selected');
                else tr.removeClass('selected');
                addSelectInfo();
            });

            $('#delete').click(function() {
                // alert( table.rows('.selected').data().length +' row(s) selected' );
                console.log(table.rows('.selected').data());
            });


        });
        </script>
        <!-- ./DOM -->
        <!-- AJAX -->
        <script type="text/javascript">
        $(document).ready(function() {

        });
        </script>
        <!-- /AJAX -->
        <!-- ./定制结束 -->
</body>

</html>